---
title: transformProps
---

# transformProps

Transform component props stored in a [Data payload](/docs/api-reference/data-model/data). This convenience method can be used for [prop renames and other data migrations](/docs/integrating-puck/data-migration).

This method will modify all data in [`content`](/docs/api-reference/data-model/data#content) and [`zones`](/docs/api-reference/data-model/data#zones).

```tsx copy showLineNumbers {7-10}
import { transformProps } from "@measured/puck";

const data = {
  content: [{ type: "HeadingBlock", props: { title: "Hello, world" } }],
};

const updatedData = transformProps(data, {
  // Rename `title` to `heading`
  HeadingBlock: ({ title, ...props }) => ({ heading: title, ...props }),
});

console.log(updatedData);
// { content: [{ type: "HeadingBlock", props: { heading: "Hello, world" } }] };
```

## Args

| Param                       | Example                                | Type                                               | Status   |
| --------------------------- | -------------------------------------- | -------------------------------------------------- | -------- |
| [`data`](#data)             | `{}`                                   | [Data](/docs/api-reference/data-model/data)        | Required |
| [`transforms`](#transforms) | `{ HeadingBlock: (props) => (props) }` | Object                                             | Required |
| [`config`](#config)         | `{ components: {} }`                   | [Config](/docs/api-reference/configuration/config) | -        |

### `data`

The [Data payload](/docs/api-reference/data-model/data) to be transformed.

### `transforms`

An object describing the transform functions for each component defined in your [`config`](/docs/api-reference/configuration/config).

- `root` is a reserved property, and can be used to update the [`root` component](/docs/api-reference/configuration/config#root) props.

### `config`

A [config](/docs/api-reference/configuration/config) object. Required if transforming data within [slots](/docs/api-reference/fields/slot).

## Returns

The updated [Data](/docs/api-reference/data-model/data) object.

## Notes

- It's important to consider that data may include both components with old data and new data, and write your transform accordingly.
